
<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--bootstrap-->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

  <!--My Styles-->
  <link href="<?php echo base_url();?>/css/search-form.css" rel="stylesheet" type="text/css" />

  <!--jqueryUI-->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/blitzer/jquery-ui.min.css" />

  <!--cdn google-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

  <!--bootstrap-->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

  <!--jquery datepicker-->
  <script type="text/javascript" src="<?php echo base_url();?>/js/show_datepicker.js"></script>

  <!-- bootstrap3-typehead -->
  <script type="text/javascript" src="<?php echo base_url();?>/js/bootstrap3-typehead.js"></script>

  <!-- jquery validation -->
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
  
  <script type="text/javascript">

    if (jQuery.validator) {
      jQuery.validator.setDefaults({
        debug: true,
        errorClass: 'has-error',
        validClass: 'has-success',
        ignore: "",
        highlight: function (element, errorClass, validClass) {
          $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
          $(element).closest('.form-group').find('.help-block').text('');
        },
        errorPlacement: function (error, element) {
          $(element).closest('.form-group').find('.help-block').text(error.text());
        },
        submitHandler: function (form) {
          if ($(form).valid()) {
            form.submit();
          }
        }
      });
}
</script>


</head>
<body>

  <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-calendar"></span> Travel itinerary</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-book"></span> Booking <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li role="presentation" class="dropdown-header">Traffic</li>
            <li><a href="#"><span class="glyphicon glyphicon-plane"></span>  Plane</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-road"></span>  Train</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-tree-conifer"></span>  Taxi</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">Place</li>
            <li><a href="#"><span class="glyphicon glyphicon-cutlery"></span>  Hotel</a></li>
          </ul>
        </li>
      </ul>
      <form id="custom-search-form" class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input id="SearchString" name="SearchString" type="text" class="form-control search-query" size="35" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default btn-lg">
          <span class="glyphicon glyphicon-search"></span>
        </button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Setting <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Logout</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>

  <h1>This is category view</h1>
  <input class="datepicker" />

  <div class="row">

    <div class="col-lg-2"></div>

    <div class="col-lg-8">

      <table class="table">
        <?php
        foreach($results as $row)
         {?>

       <tr id="<?php echo $row->id; ?>">

        <td> <?php echo $row->name; ?> </td>
        <td> <?php echo $row->id; ?> </td>

        <!-- Button trigger modal -->
        <td><a data-toggle="modal" href="#editModal" class="btn btn-success btn-edit">Edit</a></td>
        <td><a data-toggle="modal" href="#deleteModal" class="btn btn-warning btn-delete">Delete</a></td>

      </tr>
      <?php } ?>
    </table>

    <div class="row">
      <?php
      // echo $pagenumbers;
        // foreach ($pagenumbers as $pagenum) {
          
        // }
      ?>
    </div>

    <a data-toggle="modal" href="#createModal" class="btn btn-primary btn-create">Create</a>

  </div>


  <div class="col-lg-2">
  </div>

</div><!--/row-->

</body>
</html>